<template>
  <div class="wash-root">
  	<div class="wash-box">
  		<!-- <div class="time-box">
        <span>{{useTime[0]}}:{{useTime[1]}}:{{useTime[2]}}</span>
  			<span class="time-txt">剩余</span>
  		</div> -->
  		<div v-if="ableWork" class="wash-content">
  			<img src="~@/assets/images/working.png" alt="" />
        <div class="work-status">设备工作中…</div>
        <div class="work-tips">请直接使用</div>
  		</div>
      <div v-if="!ableWork" class="wash-content">
  			<img src="~@/assets/images/broken.png" alt="" />
        <div class="work-status">设备不可用…</div>
        <div class="work-tips error">故障信息</div>
  		</div>
  	</div>
    <!-- 按钮 -->
		<div class="">
			<div class="action-btn">
        知道了
			</div>
		</div>
  	<!-- <p class="wash-txt">洗车中</p> -->
  </div>
</template>
  
<script>
  import api from '@/api'

  export default {
    name: 'wash',

    data () {
      return {
        ableWork: false,
        time: [0, 0, 0],
        timeOut: 0,
        timeValue: 0,
        deviceId: ''
      }
    },

    computed: {
      useTime () {
        if (this.timeOut >= 60) {
          this.time[1] = parseInt(this.timeOut / 60)
          this.time[2] = this.timeOut % 60
          if (this.time[1] <= 9) {
            let minute = this.time[1]
            this.time[1] = '0' + minute.toString()
          }
        } else {
          this.time[1] = '00'
          this.time[0] = '00'
          this.time[2] = this.timeOut
        }
        if (this.time[2] <= 9) {
          let second = this.time[2]
          this.time[2] = '0' + second.toString()
        }
        return this.time
      }
    },

    mounted () {
      this.deviceId = this.$route.params.id || '1'
      this.timeOut = this.$route.query.time * 60
      this.timeValue = this.$route.query.time * 60
      // this.watchWashing()
      this.timeWatch()
      // let deviceId = '1'
      // let timer = setInterval(() => {
      //   try {
      //     let result = api.getDeviceState(deviceId)
      //     result.then(res => {
      //       console.log(res)
      //       if (res.data.status === 2) {
      //         this.timeOut--
      //       }
      //     })
      //   } catch (err) {
      //     console.log(err)
      //   }
      //   // this.timeOut--
      //   if (this.timeOut <= 0) {
      //     this.timeOut = 0
      //     clearInterval(timer)
      //   }
      //   console.log(this.timeOut)
      // }, 1000)
    },

    methods: {
      timeWatch () {
        setTimeout(() => {
          if (this.timeOut !== 0) {
            this.timeOut--
            this.timeWatch()
          } else {
            this.$Loading.show()
          }
        }, 1000)
      },
      watchWashing () {
        // let deviceId = '1'
        setTimeout(() => {
          // if (this.timeOut !== 0) {
          //   this.timeOut--
          // }
          api.getDeviceState(this.deviceId).then((res) => {
            if (res.data.status === 2) {
              this.watchWashing()
            } else if (res.data.status === 1) {
              this.$Loading.hide()
              this.$router.replace({name: 'end', params: {time: this.timeValue}})
            }
          }).catch((err) => {
            console.log(err)
            this.watchWashing()
          })
        }, 5000)
      },
      wash () {
        this.$router.replace({name: `end/${this.deviceId}`, params: {time: this.timeValue}})
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .wash-root
    width 100%
    height 100%
    text-align center
    .wash-txt
      text-align center
      width 80%
      margin 10% auto
      font-size 0.6rem
    .wash-box
      width 60%
      height 70%
      margin 30% auto 0
      vertical-align middle
      .error
        color red
      .work-status
        font-size 20px
      .work-tips  
        font-size 16px
      // border-bottom 0.02rem solid gray
      .time-box
        text-align center
        padding 25% 0
        font-size 0.5rem
        .time-txt
          color gray
          font-size 0.3rem
          padding-left 10%
      img
        width 60%
        margin-bottom 80px    
  .action-btn
    width 70%
    height 1.2rem
    margin 0 auto
    color #000
    text-align center
    line-height 1.2rem
    font-size 0.5rem
    font-weight bold
    background #FFE600
    &.disabled
      opacity 0.5    
</style>
